<template>
  <transition name='fade'>
    <!-- 蒙版 -->
    <div class="mask" v-if="show" @touchmove.prevent>
      <div class="window">
        <img class="shadow" :src="imgUrl[project]" alt="">
        <h1 :style="{color:themeColor[project]}">{{title}}</h1>
        <p>{{content}}</p>
        <div class="button" :style="{color:themeColor[project]}" @click="btnClick">{{btnText}}</div>
      </div>

    </div>
  </transition>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {// pharmacist 药师 |doctor 医师| nurse 护师
      show: false,
      themeColor: {
        'pharmacist': '#FF9823',
        'doctor': '#2C9EFF',
        'nurse': '#FF7D75'
      },
      imgUrl: {
        'pharmacist': require('@/assets/pharmacist.png'),
        'doctor': require('@/assets/doctor.png'),
        'nurse': require('@/assets/nurse.png')
      },
      title: '',
      content: '',
      btnText: '',
      click: '',
      project: ''
    }
  },
  computed: {

  },
  created () {

  },
  methods: {
    btnClick () {
      if (typeof (this.click) === 'function') { this.click() }

      this.show = false
    }
  }
}
</script>

<style lang="less" scoped>

  // 渐变过渡
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .35s;
  }
  // 全局弹窗
  .mask {
    width: 100vw;
    height: 100vh;
    z-index: 10;
    background:rgba(0,0,0,0.65);
    position: fixed;
    top: 0;
    left: 0;
    .window{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);

      width: 270px;
      background: #fff;
      border-radius:8px;
      text-align: center;
      .shadow{
        width: 118px;
        height: 64px;
        margin-top: -30px;
      }
      h1{
        margin-top: 16px;
        font-size:16px;

      }
      p{
        min-height:40px;
        padding-bottom:64px ;
        margin-top: 10px;
        font-size:16px;
        color:#666;
        line-height:23px;
      }
      .button{
        background: #fff;
        width:100%;
        border: none;

        cursor: pointer;
        font-size:16px;
        position: absolute;
        bottom: 0;
        color:#333;
        height:44px;
        line-height: 44px;
        border-top: 1px solid #ddd;
        border-radius: 0 0 8px 8px;
      }
    }

  }
</style>
